@charset "UTF-8";


/*;.;.;.;.;.;.;.;.;.;.;
.;.;.; CSS RESET ;.;.;.
;.;.;.;.;.;.;.;.;.;.;*/

	* {
		margin: 0;
		padding: 0;
		color: #000;
	}

/*;.;.;.;.;.;.;.;.;.
.;.;.; CANVAS .;.;.;
;.;.;.;.;.;.;.;.;.*/

	main#canvas {
		width: 68.6vw;
		height: 45.65vw;
		margin: 5.6vh auto 0 auto;
	}

/*;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; ARTIST CREDIT ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;*/

	figcaption {
		width: 68.6vw;
		margin: 0.5vw auto 0 auto;
		font-size: 12pt;
		text-align: right;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

/*;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; HTML5 SEMANTIC TAGS ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;*/

	section {
		width: 100%;
		height: 100%;
		float: left;
	}

		article {
			width: 100%;
			height: 100%;
			margin-top: 20%;
			float: left; 
		}

			figure {
				width: 100%;
				height: 100%;
					margin-top: 40%;
				float: left;
			}


/*;.;.;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; CSS COLOR CLASSES ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;.;.;*/
.topleftoutside {
	float:left;

}

.toprightoutside {
	float:right;
	margin-top: 20%;
	
}

.topleft {
	float:right;
	margin-bottom: 0px;
	
				margin-top: 28%;
				
	
}



.bottomleftoutside {
	float:right;

}

.bottomrightoutside {
	float:left;

}

.bottomleft {
	float:left;

}

.bottomright {
	float:right;

}

.insidetopleft {
	align: right;
}

.insideright {
	align: left;
}


	.skyblue {
		background-color: #329fd8; width: 385px;
		height: 300px; float: left; margin-right: 0%; margin-bottom: 0%; align-items: bottom;
	}

	.forestgreen {
		background-color: #62a846;  width: 385px;
		height: 300px; float: left; margin-left: 0%; margin-bottom: 0%; align-items: bottom;
	}

	.macandcheese {
		background-color: #e39f20; width: 325px; height: 300px; float: left; margin-left: 0%;
	}

	.eggplant {
		background-color: #545397; width: 220px;
		height: 250px; float: right; margin-right:0%; margin-bottom: 0%; align-items: bottom; align-content: bottom; padding-bottom: 0%;
	}

	.navy{
		background-color: #2a549e; width: 220px;
		height: 300px; float: left; margin-left: 0%;
	}

	.depression {
		background-color: #2a5099; width: 385px;
		height: 300px; float: left; 
	}

	.sunny {
		background-color: #fbe619; width: 325px;
		height: 350px; float: right; margin-right: 0%; margin-bottom: 0%; align-items: bottom;
	}

	.grimance {
		background-color: #494e93; width: 385px;
		height: 300px; float: left;
	}

	.sluttyred {
		background-color: #c83424; width: 250px;
		height: 50px; float: left; margin-left: 30%; align-items: bottom; margin-top: 20%; align-content: top;
	}

	.cake {
		background-color: #bc327f; width: 325px;
		height: 220px; float: right; align-items: top; margin-top: 0%; 
	}

	.grassyweed {
		background-color: #61a946; width: 220px;
		height: 100px;float: right; margin-top: 0%; 
	}

	.fire {
		background-color: #c53222;  width: 325px;
		height: 220px;float: left; align-items: top; margin-top: 0%; 
	}

	.tears {
		background-color: #2b9dd9;  width: 220px;
		height: 100px;float: left; margin-top: 0%;  
	}

.yellow {
		background-color: #fbe619; width: 150px;
		height: 50px; float: right; margin-right: 54%; align-items: top; margin-top: -31%; align-content: bottom;
	}

.macandcheese2{
		background-color: #e39f20; width: 150px;
		height: 50px; float: left; margin-left: 53.75%; align-items: top; margin-top: -31%; align-content: top;
	}

	.cake2 {
		background-color: #bc327f; width: 150px;
		height: 50px; float: right; margin-right: 54%; align-items: top; margin-top: -79%; align-content: bottom;
/*;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; HOVER PSEUDO-CLASS INTERACTIONS ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;*/
	.skyblue:hover background-color:#c53222;}

	.forestgreen:hover {background-color: #bc327f;}

	.macandcheese:hover {
		background-color: #2b9dd9;
	}

	.eggplant:hover {
		background-color: black;
	}

	.navy:hover {
		background-color: #61a946;
	}

	.depression:hover {
		background-color: #fbe619;
	}

	.sunny:hover {
		background-color: #2b9dd9;
	}

	.grimance:hover {
		background-color: #fbe619;
	}

	.sluttyred:hover {
		background-color: #fbe619;
	}

	.cake:hover {background-color: black;}


	.grassyweed:hover {
		background-color: #fbe619;
	}

	.fire:hover {
		background-color: #bc327f;
	}

	.tears:hover {
		background-color: black;
	}